<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>图形可视化</title>
    <script src="../js/jquery.js" type="text/javascript"></script>
    <script src="https://cdn.hcharts.cn/highcharts/5.0.10/highcharts.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/5.0.10/modules/exporting.js"></script>

    <style>
        html,body{width: 100%;height: 100%;margin: 0;padding: 0;}
        .container{width: 40%;padding-left: 40px;float: left;}
        .highcharts-credits{display: none;}


        .sb {
            position:relative;
            height:20px;
            height:24px;
            border: 1px solid #639;
            float:left;
            color:#000;
        }
        .sb .b {/*模拟下被切除的下拉框(select)*/
            position:absolute;
            height:22px;
            line-height:22px;
            padding:0 2px;
            overflow:hidden;
            white-space :nowrap;text-overflow:ellipsis;
            font-family:verdana;
            font-size:12px;
        }
        .sb select {
            position: absolute;
            top:0;
            right:0;
        }

        .w_50{/*以此来控制该下拉框的长度，可按需要添加多个长度Class，如w_100，w_200*/
            width:50px !important;
        }
        .w_50 select{/*根据长度切割默认下拉框*/
            width:50px;
            clip:rect(2px 48px 20px 32px);/*切除下拉框(select)内容区域，只保留下拉三角箭头*/
        }
        select{width: 200px;height: 30px;border-radius: 2px;}
        .shaixuan{margin:50px;padding-bottom: 30px;}
        .shaixuan select{float: left;margin-left: 60px;}
        .confirm:hover{cursor: pointer;}
    </style>
</head>
<body>
<div class="shaixuan">
    <select name="place">
        <option value="">全部</option>
        <option value="">福田</option>
        <option value="">罗湖</option>
        <option value="">南山</option>
    </select>
    <select>
        <option value="">全部</option>
        <option value="">腾讯</option>
        <option value="">华为</option>
        <option value="">阿里</option>
    </select>
    <div class="confirm" style="display: inline-block;width: 60px;height: 28px;line-height: 28px;border: 1px solid #7CB5EC;border-radius: 4px;text-align: center;margin-left: 40px;">确定</div>
</div>
<div style="clear: both;"></div>
<div class="container" id="container1"></div>
<div class="container" id="container2"></div>
<div class="container" id="container3"></div>
<div class="container" id="container4"></div>


<script type="text/javascript">


    Highcharts.chart('container1', {

        title: {
            text: '从业人员总数（按地区）, 2010-2017'
        },

//        subtitle: {
//            text: 'Source: thesolarfoundation.com'
//        },

        yAxis: {
            title: {
                text: '从业人数'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        plotOptions: {
            series: {
                pointStart: 2010
            }
        },

        series: [{
            name: '福田区',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            name: '罗湖区',
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
            name: '龙岗区',
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
            name: '南山区',
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
            name: '宝安区',
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }]

    });


    Highcharts.chart('container2', {
        chart: {
            type: 'line'
        },
        title: {
            text: '**公司收益情况对比'
        },
        subtitle: {
            text: '2016,2017'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: '收入金额（万元）'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: '2017',
            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '2016',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });

    Highcharts.chart('container3', {
        chart: {
            type: 'column'
        },
        title: {
            text: '各地区产业总值比较'
        },
//        subtitle: {
//            text: 'Source: WorldClimate.com'
//        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '产业总值 (万元)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} 万元</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '福田',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: '南山',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: '罗湖',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: '龙岗',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });

    Highcharts.chart('container4', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '从业总人数, 2015-2016'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            name: 'Brands',
            data: [
                { name: '新闻出版发行', y: 56.33 },
                {
                    name: '新闻出版发行',
                    y: 24.03,
                    sliced: true,
                    selected: true
                },
                { name: '广播电影电视', y: 10.38 },
                { name: '文化艺术服务业', y: 4.77 }, { name: '文化创意设计', y: 0.91 },
                { name: '文化软件业', y: 0.2 }
            ]
        }]
    });
    $('.confirm').click(function () {
        $('#container1').hide();
        $('#container2').hide();
    });
</script>
</body>
</html>
